<template>
  <div>
    <!-- 新增虚拟测点弹窗 -->
    <el-dialog
      :title="isxunicedianobj.id?'修改虚拟测点':'新增虚拟测点'"
      :visible.sync="dialogVisible"
      width="40%">
      <div class="dialogbox">
        <el-form :model="form" :rules="rules" label-position="right" label-width="100px" ref="form">
          <el-form-item label="虚拟测点" prop="itemTag">
            <el-select v-model="form.itemTag" placeholder="请选择需要通过计算公式虚拟的测点类型"
            size="small" style="width: 100%;" @change="changecedian" :disabled="isshow">
              <el-option  v-for="(item,index) in cedianlist" :key="index" :label="item.text" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="测点名称" prop="itemName">
            <el-input v-model="form.itemName" size="small" style="width: 100%;"></el-input>
          </el-form-item>
          <el-form-item label="计算公式" prop="expression">
            <el-select v-model="form.expression" placeholder="请选择虚拟测点计算公式"
            size="small" style="width: 100%;" @change="changegongsi" :disabled="isshow">
              <el-option v-for="(item,index) in gongsilist" :label="item.text" :value="item.value" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div><button class="buttons" @click="newjisuan">新增计算项</button></div>
        <div>
          <template>
            <el-table
              :data="tableData"
              :header-cell-style="{background:'#f5f5f5'}"
              height="200"
              style="width: 100%">
              <el-table-column
                prop="itemTag"
                label="计算参数">
              </el-table-column>
              <el-table-column
                prop="itemName"
                label="计算项设备">
              </el-table-column>
              <el-table-column
                prop="deviceName"
                label="计算项测点">
              </el-table-column>
              <el-table-column
                label="操作" width="120">
                <template #default="{row}">
                  <span @click="del(row)"><i style="color: red;" class="el-icon-delete"></i></span>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
      <span slot="footer" >
        <button class="button" @click="quxiao">取 消</button>
        <button class="button sure" type="primary" @click="surecidian">确 定</button>
      </span>
    </el-dialog>
    <!-- 新增虚拟测点计算项弹窗 -->
    <el-dialog
      title="新增虚拟测点计算项"
      :visible.sync="dialogVisibles"
      width="30%">
      <div>
        <el-form :model="forms" :rules="ruless" label-position="right" label-width="100px" ref="forms">
          <el-form-item label="计算参数" prop="argName">
            <el-select v-model="forms.argName" placeholder="请选择计算参数" size="small"
            @change="changecanshu" style="width: 100%;">
              <el-option v-for="(item,index) in canshulist" :label="item.text" :value="item.value" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计算项测点" prop="itemTag">
            <el-select v-model="forms.itemTag" placeholder="请选择计算项关联测点" size="small"
             @change="changejisuancedian" style="width: 100%;">
              <el-option v-for="(item,index) in jisuancedianlist" :label="item.text" :value="item.value" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计算项设备" prop="deviceId">
            <el-select v-model="forms.deviceId" placeholder="请选择计算项关联设备" size="small"
            @change="changeshebei" style="width: 100%;">
              <el-option v-for="(item,index) in shebeilist" :label="item.text" :value="item.value" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" >
        <button class="button" @click="qujisuanx">取 消</button>
        <button class="button sure" type="primary" @click="surecediancanshu">确 定</button>
      </span>
</el-dialog>
  </div>
</template>

<script>
import {
  getjisuancanshuapi, getxunicedianapi, getjisuangsapi, getjisuanxiangcdapi,
  getjisuanxshebeiapi,postxunicedianapi,getchaxunapi,putxunicedianapi
} from '@/api/xunicedian'
export default {
  name: 'MaintenanceXunicedian',
  props: {
    value: {
      type: String,
    },
    isxunicedianobj: {
      type:Object
    }
},
  data() {
    return {
      shebeilist:[],
      jisuancedianlist:[],
      canshulist:[],
      gongsilist:[],
      cedianlist:[],
      tableData: [],
      dialogVisibles: false,
      dialogVisible: false,
      form: {itemName:'',expression:'',itemTag:''},
      rules: {
        itemTag: [{ required: true, message: '请选择计算参数', trigger: 'blur' }],
        itemName: [{ required: true, message: '请输入测点名称', trigger: 'blur' }],
        expression: [{ required: true, message: '请选择计算公式', trigger: 'blur' }],
      },
      ruless: {
        argName: [{ required: true, message: '请选择计算参数', trigger: 'blur' }],
        deviceId: [{ required: true, message: '请选择计算项设备', trigger: 'blur' }],
        itemTag: [{ required: true, message: '请选择计算项测点', trigger: 'blur' }],
      },
      forms: {itemName:'',deviceName:'',argName:'',itemTag:'',deviceId:''},
      formulaExpression: '',
      itemTag: '',
      isshow:false
    };
  },

  async mounted() {
  //   const res = await getjisuancanshuapi()
  //  console.log(res);
  },

  methods: {
    // 确认虚拟测点
    async surecidian() {
      await this.$refs.form.validate()
      if (this.isxunicedianobj.id) {
        await putxunicedianapi({
          id:this.isxunicedianobj.id,
          deviceId: this.value,
        itemTag: this.form.itemTag,
        itemName: this.form.itemName,
        expression: this.form.expression,
        arguments:this.tableData
      })
      } else {
        await postxunicedianapi({
        deviceId: this.value,
        itemTag: this.form.itemTag,
        itemName: this.form.itemName,
        expression: this.form.expression,
        arguments:this.tableData
      })
     }
      this.delarrlist()
      this.dialogVisible = false
      this.isshow=false
      this.tableData=[]
      this.$refs.form.resetFields()
      this.$emit('shuaxin')
      this.$emit('qingkong')
    },
    // 删除虚拟测点计算项
    del(row) {
      this.$confirm('此操作将永久删除该配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.tableData = this.tableData.filter(ele => {
            if (ele.itemName!==row.itemName||ele.deviceName!==row.deviceName||ele.itemTag!==row.itemTag) {
              return ele
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 确定虚拟测点计算项
    async surecediancanshu() {
      await this.$refs.forms.validate()
      this.tableData.push(this.forms)
      this.dialogVisibles = false
      this.shebeilist=[]
      this.jisuancedianlist=[]
      this.forms={}
    },
    // 设备项下拉
    changeshebei(val) {
      this.forms.deviceName=this.shebeilist.filter(ele=>ele.value==val)[0].text
    },
    // 计算项测点下拉
    async changejisuancedian(val) {
      const res = await getjisuanxshebeiapi({ itemTag: this.forms.itemTag, deviceId: this.value })
      this.shebeilist = res.data.list
      this.forms.itemName=this.jisuancedianlist.filter(ele=>ele.value==val)[0].text
    },
    // 计算参数下拉
    async changecanshu(val) {
      this.forms.itemTag=''
      const res = await getjisuanxiangcdapi({ argName: val, formulaExpression: this.form.expression })
      this.jisuancedianlist=res.data.list
    },
    // 计算公式下拉
    async changegongsi(val) {
      this.formulaExpression=val

    },
    // 虚拟测点下拉事件
    async changecedian(val) {
      this.itemTag = val
      this.form.expression=''
      const res = await getjisuangsapi({ itemTag: val })
      this.gongsilist=res.data.list
    },
    // 取消虚拟测点弹窗
    quxiao() {
      this.delarrlist()
      this.dialogVisible = false
      this.$emit('qingkong')
      this.tableData=[]
      this.isshow=false
      this.$refs.form.resetFields()
    },
    // 取消虚拟测点计算项弹窗
    qujisuanx() {
      this.shebeilist=[]
      this.jisuancedianlist=[]
      this.dialogVisibles = false
      this.$refs.forms.resetFields()
    },
    // 新增计算项
    async newjisuan() {
      if (this.form.itemTag && this.form.expression) {
        this.dialogVisibles = true
        const res = await getjisuancanshuapi({ formulaExpression: this.form.expression })
      this.canshulist = res.data.list
      } else {
        this.$message.warning('请先选择计算公式')
      }
    },
    // 清空全部表格
    delarrlist() {
      this.shebeilist=[]
      this.jisuancedianlist=[]
      this.canshulist=[]
      this.gongsilist=[]
      this.cedianlist=[]
    }
  },
  watch: {
    async dialogVisible(val) {
      if (val) {
        const res = await getxunicedianapi({ deviceId: this.value })
        this.cedianlist = res.data.list
        if (this.isxunicedianobj.id) {
          this.isshow=true
          const res = await getchaxunapi({ id: this.isxunicedianobj.id })
          this.form = res.data.entity
          this.tableData=res.data.entity.arguments
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.dialogbox{
  padding: 20px;
  .buttons{
    background-color: #1890ff;
  color: #fff;
  height: 30px;
  border-radius: 3px;
  width: auto;
  margin: 10px 0;
  border: none;
  cursor: pointer;
  }
}
.button{
  width: 60px;
  height: 30px;
  border-radius: 3px;
  margin-left: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
}
.sure{
  background-color: #1890ff;
  color: #fff;
}
</style>
